import React, { Component } from 'react'

import MyBtn from './MyBtn'


export default class MyProps2 extends Component {
  state = {
    count: 100,
    msg: '陪你去流浪',
    word: 'see you again'
  }


  onChange = (e) => {
    this.setState({
      word: e.target.value
    })
  }

  changeCount = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

  changeMsg = (msg) => {
    this.setState({
      msg
    })
  }

  render() {
    const { count, msg, word } = this.state
    return (
      <div>
        <h3>组件通信 - 父改子</h3>
        <h4>
          count = {count}
        </h4>
        <h4>
          msg = {msg}
        </h4>
        <h4>
          word = {word}
        </h4>
        <div>
          <input type="text" value={word} onChange={this.onChange} />
        </div>
        <br />
        <MyBtn text='Count + 1' onClick={this.changeCount}></MyBtn>
        <br />
        <MyBtn text='changeMsg' onClick={() => this.changeMsg('刚刚好')}></MyBtn>

        <MyChild count={count} msg={msg} word={word}></MyChild>
      </div>
    )
  }
}



class MyChild extends Component {
  render() {
    const { count, msg, word } = this.props
    return (
      <div>
        <h3>子组件</h3>
        <h4>count = {count}</h4>
        <h4>msg = {msg}</h4>
        <h4>word = {word}</h4>
      </div>
    )
  }
}
